<!-- 展示谜题页面 -->

<template>
	<view class="body">
		<!--选项卡start-->
		<view class="fenduanqi-all">
			<uni-section title="实心标签" type="line" style="z-index: 1;">
				<view class="fenduanqi-padding">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view>
						<!--单独的一个list，for循环产生 start-->
						<view class="choose-my-public">
							<Items :UserPuzzleList='UserPuzzleList' @unitag_change="unitag_change"
								@unitag_delete="unitag_delete" :current='current' :type='orderType'></Items>
						</view>
						<!--单独的一个list，for循环产生end-->
					</view>
				</view>
			</uni-section>

			<!-- 下拉框start -->
			<uni-section class="select">
				<uni-data-select v-model="orderType" :localdata="range" @change="change"></uni-data-select>
			</uni-section>
			<!-- 下拉框end -->

			<!--出题按钮start--new  (固定形态)-->


			<view class="btn-add-new-container">
				<button class="btn-add-new" @click="goToAddPuzzle(-1)">
					出题
				</button>
			</view>
			<!--出题按钮end--new-->
		</view>
		<!--选项卡end-->




	</view>

</template>
<style lang="scss" scoped>
	@import './prodece_pazel.scss';
</style>
<script>
	import Items from './items.vue';
	import {
		showUserList,
		deletePuzzle, //谜题的删除
	} from '@/config/api.js'
	export default {
		computed: {


		},
		components: {
			Items
		},
		data() {
			return {
				range: [{
						value: 0,
						text: "默认"
					},
					{
						value: 1,
						text: "时间顺序"
					},
					{
						value: 2,
						text: "星级顺序"
					},
				],
				orderType: 0,
				//获取到的用户提交的 puzzle （全部）
				UserPuzzleList: [],
				id: -1,
				listshowtime: '',
				//默认传递给页面的id是-1，可省去。。。。
				///


				//选项卡start
				items: ['全部', '未审核', '已审核'],
				current: 0,
				styleType: 'button',
				colors: ['#007aff', '#4cd964', '#dd524d'],
				colorIndex: 0,
				activeColor: '#007aff',
				////选项卡end


			}
		},
		created() {

		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// console.log(option.id); //打印出上个页面传递的参数。
			// this.id = option.id;

			console.log("id=" + this.$store.state.userInfo.id)
			const id = this.$store.state.userInfo.id
			this.id = id;

			this.showUserListE();







		},
		onShow() {
			this.showUserListE()
		},
		methods: {
			change(e) {
				console.log("下拉框==》e:", e);
			},
			//页面展示时候判断是什么类型的谜题
			computedPuzzleType(type) {
				//0填空，1多选，2单选，3判断
				switch (type) {
					case 0:
						return '填空';
						break;
					case 1:
						return '多选';
						break;
					case 2:
						return '单选';
						break;
					case 3:
						return '判断';
						break;
				}
			},
			// 修改谜题函数start
			unitag_change(id) {
				this.goToAddPuzzle(id)
			},
			// 删除谜题函数start
			async unitag_delete(id) {
				uni.showModal({
					content: "确认删除？",
					success: async (res) => {
						if (res.confirm) {
							const res = await deletePuzzle([id])
							this.showUserListE()
						}
					}
				})
			},
			// 删除谜题函数end

			//出谜题 的函数start
			goToAddPuzzle(itemId) {
				const id = this.$store.state.userInfo.id;
				console.log("user id:", id);
				uni.navigateTo({
					url: `/pages/addPuzzle/addPuzzle?id=${id}&itemId=${itemId}`
				});
			},
			//出谜题 的函数end


			//谜题状态 分段器的函数start
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			//谜题状态 分段器的函数end


			//获取到用户发布的谜题的列表start
			async showUserListE() {
				console.log(this.$store.state.userInfo.wxtoken)
				try {
					let res = await showUserList(this.id);
					// 使用await等待异步函数的执行结果
					//将日期转换为字符串
					this.UserPuzzleList = res; // 将结果赋值给UserPuzzleList
					this.UserPuzzleList = this.UserPuzzleList.map(obj => obj).sort((a, b) => b.id - a.id);
					console.log(JSON.stringify(this.UserPuzzleList));
				} catch (error) {
					console.error('Error fetching user puzzle list:', error);
				}

			},
			//获取到用户发布的谜题的列表start--end

			//将时间字符串化start
			formatUpdateTime(updateTime) {
				const date = new Date(updateTime[0], updateTime[1] - 1, updateTime[2])

				//const options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
				return date.toLocaleDateString('en-US');

				//return date.toISOString();

			},
			//将时间字符串化end
		}
	}
</script>